import { useNavigationWithState } from "@/hooks/useNavigationWithState";
import type { Article } from "@/types";
import { EyeOutlined, HeartOutlined, CommentOutlined } from "@ant-design/icons";
import { Divider, Tag } from "antd";
import { getDifficultyColor } from "@/Utils/getDiffcultyColor";


export const ArticleList = ({ articles }: { articles: Article[] }) => {
  const navigate = useNavigationWithState();
  return (
    <div className="space-y-6">
      {articles.map((article, index) => (
        <>
          <article
            key={article.id}
            onClick={() => {
              navigate(`/article/${article.id}`, location.pathname);
            }}
            className="group hover:bg-gray-50 transition-colors rounded-lg p-4 cursor-pointer mb-0"
          >

            <div className="flex gap-4 relative">
              {/* 精选文章 */}
              {article.isTop && (
                <div className="absolute -top-4 -right-4 w-12 h-12 bg-gradient-to-r from-blue-100  to-blue-400 opacity-60 rounded-[50%] flex justify-center items-center">
                  <i className="text-white text-sm font-[900] -rotate-15">精选</i>
                </div>
              )}
              {/* 热榜 */}
              {article.isHot && (
                <div className="absolute -top-4 -right-4 w-12 h-12 bg-gradient-to-r from-red-100  to-red-400 opacity-60 rounded-[50%] flex justify-center items-center">
                  <i className="text-white text-sm font-[900] -rotate-15">热榜</i>
                </div>
              )}
              {/* 封面 */}
              {article.cover && (
                <div className="flex-shrink-0 w-48 h-32 rounded-lg overflow-hidden">
                  <img
                    src={article.cover}
                    alt={article.title}
                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                  />
                </div>
              )}
              <div className="flex-1 min-w-0">
                {/* 信息区域 */}
                <div className="flex items-center gap-4">
                  {/* 用户信息 */}
                  <div className="flex items-center gap-2">
                    <img
                      src={article.author.avatar}
                      alt={article.author.username}
                      className="w-6 h-6 rounded-full"
                    />
                    <span className="text-sm text-gray-600">{article.author.username}</span>
                  </div>
                  {/* 发表时间 */}
                  <span className="text-sm text-gray-500">{article.publishTime.split('T')[0]}</span>
                </div>
                {/* 文章标题 */}
                <h3 title={article.title} className="text-xl font-semibold mb-2 group-hover:text-blue-600 transition-colors truncate">
                  {article.title}
                </h3>
                {/* 文章摘要 */}
                <p title={article.summary} className="text-gray-600 line-clamp-2 mb-4 text-sm">{article.summary}</p>

                {/* 标签,浏览,点赞,评论区域 */}
                <div className="flex items-center justify-between">
                  {/* 标签区域 */}
                  <div className="flex items-center gap-2 mb-2">
                    {
                      article.difficulty && <span className={`px-2 py-1 rounded-full text-xs font-medium ${getDifficultyColor(article.difficulty)}`}>
                        {article.difficulty === 'easy' && '入门'}
                        {article.difficulty === 'medium' && '进阶'}
                        {article.difficulty === 'hard' && '高级'}
                      </span>
                    }
                    {
                      article.tags.map((tag: string, index: number) => {
                        return (
                          <Tag color='blue' key={index}>{tag}</Tag>
                        )
                      })
                    }
                  </div>
                  {/* 浏览,点赞,评论 */}
                  <div className="flex items-center gap-4 text-sm text-gray-500">
                    <span className="flex items-center gap-1">
                      <EyeOutlined />
                      {article.views}
                    </span>
                    <span className="flex items-center gap-1">
                      <HeartOutlined />
                      {article.likes}
                    </span>
                    <span className="flex items-center gap-1">
                      <CommentOutlined />
                      {article.comments}
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </article>
          {index !== articles.length-1 && <Divider size="small"/>}
        </>
      ))}
    </div>
  )
}